<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>工作台</h1>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="grid-content bg-purple">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="grid-content statistics">
                            <div class="title">今日预约数</div>
                            <div class="number">{{ todayOrderNumber }}</div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content statistics">
                            <div class="title">今日到诊数</div>
                            <div class="number">{{ todayVisitsNumber }}</div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content statistics">
                            <div class="title">本周预约数</div>
                            <div class="number">{{ thisWeekOrderNumber }}</div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content statistics">
                            <div class="title">本月预约数</div>
                            <div class="number">{{ thisMonthOrderNumber }}</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            todayOrderNumber: 0,   //今日预约数
            todayVisitsNumber: 0,  //今日到诊数
            thisWeekOrderNumber: 0, //本周预约数
            thisMonthOrderNumber: 0,//本月预约数
        },
        created() {
            this.getBusinessReportData();
        },
        methods:{
            getBusinessReportData(){
                axios.get("/report/getBusinessReportData").then((res)=>{
                    if(res.data.flag){
                        this.todayOrderNumber = res.data.data.todayOrderNumber;
                        this.todayVisitsNumber = res.data.data.todayVisitsNumber;
                        this.thisWeekOrderNumber = res.data.data.thisWeekOrderNumber;
                        this.thisMonthOrderNumber = res.data.data.thisMonthOrderNumber;
                    }
                });
            }
        }
    })
</script>
<style>
    .statistics {
        height: 120px;
        padding: 20px;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        margin-bottom: 20px;
    }
    .statistics .title {
        font-size: 16px;
        color: #909399;
        margin-bottom: 10px;
    }
    .statistics .number {
        font-size: 24px;
        color: #409EFF;
    }
</style>
</html>